<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-form :inline="true" :model="params" ref="params" class="demo-form-inline sarchForm" size="small"
					@submit.native.prevent>
					<el-form-item label="课题名称">
						<el-input @keyup.enter.native="handleSubmit" v-model="params.name"
							placeholder="课题名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSubmit">查询</el-button>
						<el-button @click="handleReset">重置</el-button>
						<!-- <el-button @click="handleAdd('add', cateInfo)" type="primary"
							icon="el-icon-plus">新增课题</el-button> -->
						<!-- <el-button size="small" @click="batchDelete()" plain type="danger">批量删除</el-button> -->
					</el-form-item>
					<el-form-item>
						<!-- <el-button size="small" @click="batchTransfer()" plain type="success">批量转移</el-button> -->
					</el-form-item>
				</el-form>
				
				<el-table v-loading="loading" :row-key="getKey" :data="newData" style="width: 100%"
					:header-cell-style="{ background: '#f0f2f5' }" ref="tableRef" @selection-change="changeSelect">
					<!-- <el-table-column type="selection" width="55" reserve-selection :selectable="judgeSelect">
					</el-table-column> -->
					<el-table-column label="序号" width="48" type="index"></el-table-column>
					<el-table-column prop="name" width="200" label="课题名称" show-overflow-tooltip>
						<template slot-scope="scope">
							<span class="nameHover" @click="handleDetail(scope.row.id)">{{scope.row.name}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="applicableIndustry" label="适用行业" width="200" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="description" label="课题描述" width="200" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="memberDtos" label="审核状态" width="200" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-tag v-if="scope.row.memberDtos[0].status === '0'" type="warning">待审核</el-tag>
							<el-tag v-if="scope.row.memberDtos[0].status === '1'" type="success">已通过</el-tag>
							<el-tag v-if="scope.row.memberDtos[0].status === '2'" type="danger">审核驳回</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="startTime" label="报名开始日期" width="150" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{scope.row.startTime.slice(0,10)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="endTime" label="报名结束日期" width="150" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{scope.row.endTime.slice(0,10)}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="contact" label="联系人" width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="contactPerson" label="联系方式" width="150" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="createTime" width="170" label="创建时间" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="updateTime" label="更新时间" width="170" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="memberDtos" label="报名时间" width="200" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{scope.row.memberDtos[0].createTime}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="opinion" label="审核意见" show-overflow-tooltip>
				        <template slot-scope="scope">
				            <span>{{ scope.row.opinion }}</span>
				        </template>
				    </el-table-column>
					<el-table-column fixed="right" label="操作" width="60">
						<template slot-scope="scope">
							<!-- <el-button
								:disabled="scope.row.verifyStatus === '1' || scope.row.verifyStatus === '4'"
								@click="handleEdit('edit', cateInfo, scope.row)" type="text"
								size="small">编辑</el-button> -->
							<!-- <el-button
								:disabled="scope.row.verifyStatus === '1' || scope.row.verifyStatus === '4'"
								@click="hanldeDelete(scope.row.id)" type="text" size="small">删除</el-button> -->
							<!-- <el-button
								:disabled="scope.row.verifyStatus === '1' || scope.row.verifyStatus === '4'"
								@click="hanldeDelete(scope.row.id)" type="text" size="small">退出</el-button> -->
							<el-button v-if="cateInfo.cateName === '高新优品'"
								@click="handleaDetail(scope.row.id, cateInfo.cateName)" type="text"
								size="small">详情</el-button>
							<el-button v-if="cateInfo.cateName !== '高新优品'" @click="handleDetail(scope.row.id)"
								type="text" size="small">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				<!-- 分页 -->
				<div class="poolPage">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="params.page" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
		<!-- 新增资讯 -->
		<NewDialog @getNewList="getNewList" ref="newCon" />
		<!-- 详情 -->
		<!-- <RenovationDetail ref="detailContent" /> -->
		<el-dialog title="选择栏目" :visible.sync="dialogVisible" width="30%">
			<div class="treeWrapper">
				<el-tree ref="tree" class="treeRadio" default-expand-all :props="defaultPropsSelect" :data="dataTree"
					show-checkbox check-strictly node-key="id" @check="handleClick" @check-change="handleClickChange" />
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleTo()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getColumnTree2,
		getColumnList,
		getNewDelete,
		getNewOptions,
		getNewDetail,
		transferNews
	} from "@/request/api/new";
	import NewDialog from "./newDialog.vue";
	import {
		myTopicJoinList,
		myTopicAudit,
		myTopicDelete,
		myTopicAdd
	} from "@/request/api/topic";
import {
		getKey
	} from "@/request/api/planPromotion";
	export default {
		components: {
			NewDialog,
		},
		data() {
			return {
				dataTree: [{
					name: '平台资讯',
					id: 0
				}, {
					name: '机构资讯',
					id: 1
				}, {
					name: '专家资讯',
					id: 2
				}],
				defaultProps: {
					children: "children",
					label: "name",
				},
				defaultPropsSelect: {
					children: "children",
					label: "name",
				},
				selectCate: {
					checkStrictly: true,
					label: "name",
					children: "children",
					value: "id",
					getCheckedNodes: true,
					expandTrigger: "hover",
				},
				isEdit: false,
				loading: false,
				params: {
					page: 1,
					pageSize: 10,
					name: "", //标题
					createBy:""
				},
				newData: [],
				cateInfo: {
					cateId: "", //栏目id
					cateName: "我的课题", //栏目名称
				},
				total: 0,
				multipleSelection: [], //批量选择
				dialogVisible: false,
			};
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
			  let userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
			  this.params.createBy = userInfo.id
			}
			// this.getTypeTree();
			this.getNewList();
			// this.getNewList(this.cateInfo.cateId
		},
		methods: {
			handleTabClick(tab) {
				this.cateInfo.cateId = tab.name;
				this.cateInfo.cateName = tab.label;
				// this.params.informationType = tab.name;
				
			    if (tab.name === '0') {
					this.params.createBy = ''
			    } else if (tab.name === '1') {
			       this.params.createBy = JSON.parse(window.sessionStorage.getItem("userInfo")).id
			    }
				this.getNewList()
			},
			// 获取产品类型树
			getTypeTree() {
				getColumnTree2().then((res) => {
					if (res.data.code === 200) {
						this.loading = false;
						this.dataTree = res.data.result;
					}
				});
			},
			// 父级
			selectValue() {
				this.$refs.cascader.dropDownVisible = false;
			},
			// 查看详情
			handleDetail(id) {
				let url = this.$router.resolve({
					name: "topicCollectDetail",
					query: {
						id
					},
				});
				window.open(url.href, "_blank");
			},

			handleaDetail(id, name) {
				let url = this.$router.resolve({
					name: "topicCollectDetail",
					query: {
						id
					},
				});
				window.open(url.href, "_blank");
			},
			// 点击左侧树获取信息
			handleNodeClick(data) {
				if (data.children) {
					this.$message({
						message: "不可选择父级栏目进行新增资讯！",
						type: "warning",
					});
					this.cateInfo.cateId = "";
					this.cateInfo.cateName = "";
					this.params.informationType = "";
				} else {
					this.cateInfo.cateId = data.id;
					this.cateInfo.cateName = data.name;
					this.params.informationType = data.id;
					this.getNewList(data.id);
				}
			},
			// 获取新闻列表
			getNewList() {
				this.newData =[]
				this.loading = true
				myTopicJoinList(this.params).then((res) => {
					this.loading = false
					if (res.data.code === 200) {
						this.newData = res.data.result.items;
						this.total = res.data.result.total;
						
						getKey('applicable_industry').then(res => {
							if (res.data.code === 200) {
								let list = res.data.result.items
								this.newData.map((item)=>{
									list.map((item2)=>{
										if(item.applicableIndustry && item.applicableIndustry==item2.value){
											item.applicableIndustry = item2.label
										}
									})
								})
							}
						})
					}
				});
			},
			// 新增资讯
			handleAdd(type, cateInfo) {
				this.$refs.newCon.open(type, cateInfo);
				// if (this.cateInfo.cateId !== '') {
				// 	this.$refs.newCon.open(type, cateInfo);
				// } else {
				// 	this.$message({
				// 		message: "请选择栏目！",
				// 		type: "warning",
				// 	});
				// }
			},
			// 编辑
			handleEdit(type, cateInfo, info) {
				this.$refs.newCon.open(type, cateInfo, info);
			},
			// 删除
			hanldeDelete(id) {
				this.$confirm("确定删除该条信息吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getDelete(id);
				});
			},
			// 删除接口
			getDelete(id) {
				myTopicDelete(id).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						this.getNewList();
						this.$refs.tableRef.clearSelection();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 选择左侧复选框
			changeSelect(val) {
				this.multipleSelection = val;
			},
			getKey(row) {
				return row.id;
			},
			// 批量删除
			batchDelete() {
				if (this.multipleSelection.length === 0) {
					this.$message({
						message: "请选择数据！",
						type: "warning",
					});
					return false;
				}
				this.$confirm("确定删除吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					var ids = this.multipleSelection.map((item) => item.id);
					this.getDelete(ids);
				});
			},
			// 查询
			handleSubmit() {
				this.params.page = 1;
				this.getNewList(this.cateInfo.cateId);
			},
			// 重置
			handleReset() {
				this.params.page = 1;
				this.params.name = null;
				this.getNewList(this.cateInfo.cateId);
			},
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.params.page = 1;
				this.getNewList(this.cateInfo.cateId);
			},
			handleCurrentChange(val) {
				this.params.page = val;
				this.getNewList(this.cateInfo.cateId);
			},
			// 提交
			handleSend(info) {
				this.$confirm("确定提交审核吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					// this.getAdd({
					// 	id: info.id,
					// 	verifyStatus: 4
					// });
					let params = JSON.parse(JSON.stringify(info))
					params.verifyStatus = 4
					myTopicAdd(params).then((res) => {
						if (res.data.code === 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							// this.dialogVisible = false
							this.getNewList();
						} else {
							this.$message.error(res.data.message);
						}
					});
				});
			},
			// 下架
			handleLower(info) {
				this.$confirm("确定下架该资讯吗?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				}).then(() => {
					this.getAdd({
						id: info.id,
						verifyStatus: 2
					});
				});
			},
			// 修改接口
			getAdd(params) {
				myTopicAudit(params).then((res) => {
					if (res.data.code === 200) {
						this.$message({
							message: res.data.message,
							type: "success",
						});
						// this.dialogVisible = false
						this.getNewList();
					} else {
						this.$message.error(res.data.message);
					}
				});
			},
			// 判断表格每一行的 CheckBox 是否可以勾选
			judgeSelect(row, index) {
				return row.verifyStatus == "0" || row.verifyStatus == "2" || row.verifyStatus == "3"; // 返回true该行可选，返回false则不可选
			},
			// 批量转移
			batchTransfer() {
				if (this.multipleSelection.length === 0) {
					this.$message({
						message: "请选择数据！",
						type: "warning",
					});
					return false;
				}
				this.dialogVisible = true;
				this.$refs.tree.setCheckedKeys([]);
			},
			handleClickChange(data, check, childCheck) {
				if (check) {
					this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
				}
			},
			handleClick(data, tree) {
				this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点
				this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点
			},
			// 转移栏目-点击确定
			handleTo() {
				var columnData = this.$refs.tree.getCheckedNodes();
				if (columnData.length === 0) {
					this.$message({
						message: '请选择栏目！',
						type: 'warning'
					});
					return false;
				} else {
					var newData = []
					this.multipleSelection.forEach(item => {
						newData.push({
							id: item.id, //资讯id
							ntCtgId: columnData[0].id, //栏目id
							columnName: columnData[0].name //栏目名称
						})
					})
					transferNews(newData).then(res => {
						if (res.data.code === 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							this.dialogVisible = false
							this.getNewList();
							this.$refs.tableRef.clearSelection();
						} else {
							this.$message.error(res.data.message);
						}
					})
				}

			}
		},
	};
</script>
<style lang="less" scoped>
	.el-card {
		overflow-y: auto;
		height: 830px;
	}

	.bigBtn {
		width: 140px;
	}

	.tree_icon {
		color: #67c23a;
	}

	.poolPage {
		margin-top: 15px;
		text-align: right;
	}

	/deep/.treeRadio .el-checkbox__inner {
		border-radius: 50%;
	}

	/deep/ .el-tree {
		// padding-top: 15px;
		// padding-left: 10px;

		// 不可全选样式
		.el-tree-node {
			margin-bottom: 5px;

			.is-leaf+.el-checkbox .el-checkbox__inner {
				display: inline-block;
			}

			.el-checkbox .el-checkbox__inner {
				display: none;
			}
		}
	}

	.treeWrapper {
		height: 600px;
		overflow-y: auto;
	}
	.nameHover:hover{
		cursor: pointer;
		color: #409EFF;
	}
</style>